<template>
	<view class="content">
		<view class="form">
			<view class="title">
				<text>
					Create an Account?
				</text>
			</view>
			<view class="item">
				<u--input placeholder="Username" class="input" prefixIcon="account-fill"
					prefixIconStyle="font-size: 22px;color: #909399" v-model="form.username"></u--input>
			</view>
			<view class="item">
				<u--input placeholder="Name" class="input" prefixIcon="account-fill"
					prefixIconStyle="font-size: 22px;color: #909399" v-model="form.name"></u--input>
			</view>
			<view class="item">
				<u--input placeholder="email@example.com" class="input" prefixIcon="email-fill"
					prefixIconStyle="font-size: 22px;color: #909399" v-model="form.email"></u--input>
			</view>
			<view class="item">
				<u--input placeholder="Phone number" class="input" prefixIcon="phone-fill"
					prefixIconStyle="font-size: 22px;color: #909399" v-model="form.phone"></u--input>
			</view>
			<view class="item">
				<u--input placeholder="Password" class="input" prefixIcon="lock-fill"
					prefixIconStyle="font-size: 22px;color: #909399" password clearable v-model="form.password">
				</u--input>
			</view>
			<view class="item">
				<u--input placeholder="Retype password" class="input" prefixIcon="lock-fill"
					prefixIconStyle="font-size: 22px;color: #909399" password clearable v-model="form.password2">
				</u--input>
			</view>

			<button type="primary" class="signup" @click="login">
				sign up
			</button>


		</view>
		<view class="text" @click="back">
			<text>
				Already have account?
			</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					username: "",
					name: "",
					email: "",
					phone: "",
					password: "",
					password2: ""
				}
			};
		},
		methods: {
			back() {
				uni.navigateBack({

				})
			},
			login() {
				console.log(this.form)
				// 	uni.switchTab({
				// 		url: "../recommend/recommend"
				// 	})
			}

		}
	}
</script>

<style lang="scss">
	.content {
		// background-color: #007AFF;
		height: 100vh;
		background-image: $login-background-base64-code;
		background-repeat: repeat-x;
		background-size: 100% 100%;

		.form {
			background-color: white;
			border-radius: 20px;
			height: 520px;
			margin: 30px 15px;

			.title {
				display: flex;
				align-items: center;
				text-align: center;
				justify-content: center;
				font-size: 30px;
				padding: 10px 0px 0px 0px;
				// background-color: #C0C0C0;
			}

			display: flex;
			flex-direction: column;
			justify-content:space-around;

			.item {
				margin: 0px 20px;

				.input {
					background-color: #f3f4f9;
					height: 40px;
					border: #C0C0C0 0.5px solid;
					border-radius: 8px;
				}
			}

			.signup {
				margin: 10px 20px;
				height: 50px;
			}

			button::after {
				content: '';
				display: table;
				height: 100px;
			}

		}

		.text {
			display: flex;
			align-items: center;
			text-align: center;
			justify-content: center;
			color: white;
			font-size: 18px;
		}


	}

	.content::before {
		content: '';
		display: table;
		clear: both;
	}
</style>
